import React from 'react';
import { message } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import Api from 'Utils/api';
import Article from '../../Components/Article';
import { RESOURCE_HOST } from '../../../../constants/config';
import './index.scss';

class processDetail extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      id: props.params.id,
      data: {},
      mediaType: ''
    };

    this.initData = ::this.initData;
    this.returnHandle = ::this.returnHandle;
  }
  componentWillMount() {
    this.initData();
  }
  initData() {
    const api = new Api({
      method: 'GET',
      path: `/processes/${this.state.id}`,
      success: (json) => {
        this.setState({
          data: json,
          mediaType: json.media_type
        }, () => {
          const { mediaType } = this.state;
          if (mediaType === 'video') {
            this.vrVideo = new VRView.Player('#video', {
              width: '100%',
              height: '100%',
              video: `${RESOURCE_HOST}${json.flow_vr}`,
              is_stereo: false,  //区分是mono还是stereo
            });
          } else if (mediaType === 'image') {
            this.vrImg = new VRView.Player('#video', {
              width: '100%',
              height: '100%',
              image: `${RESOURCE_HOST}${json.flow_vr}`,
              is_stereo: false,  //区分是mono还是stereo
            });
          }
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  returnHandle() {
    this.props.dispatch(routerActions.goBack());
  }
  render() {
    const { data } = this.state;
    return (
      <div className="work-report-wrap">
        <Article
          title={data.process_name || ''}
          createTime={data.modify_time || ''}
          author={data.releaser || ''}
          desc={
            <div className="run-once-detail">
              {
                data.flow_chat ? <img src={`${RESOURCE_HOST}${data.flow_chat}`} alt={data.process_name} /> : ''
              }
              {
                data.introduction ? <p><span dangerouslySetInnerHTML={{ __html: data.introduction.replace(/\n/g, '<br/>') }} /></p> : ''
              }
              {
                data.flow_vr ? <div style={{ width: '100%', height: 500, backgroundColor: 'black' }} id="video" /> : ''
              }
            </div>
          }
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}
export default connect(mapStateToProps)(processDetail);
